<script setup lang="ts">
import { editUserInfo, getUserInfoById } from '@/api/user';
import { UserInfo } from '@/api/user/type';
import YHeader from '@/components/YHeader.vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const userInfo = ref({} as UserInfo)

onMounted(() => {
    const route = useRoute();
    const userId = route.query.userId as string;
    if (userId != undefined) {
        getUserInfoById(userId).then((res) => {
            userInfo.value = res.data as UserInfo;
        });
    }
})

const submit = () => {
    editUserInfo(userInfo.value);
}

</script>

<template>
    <div class="container">
        <YHeader></YHeader>
        <van-cell-group inset style="margin-top: 3%;">
            <van-field v-model="userInfo.nickname" label="昵称" placeholder="请输入用户名" />
        </van-cell-group>
        <div class="button">
            <van-button type="primary" @click="submit">提交修改</van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.button {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
}
</style>